﻿<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ZHH Simple jqPaginator</title>
    <link href="/jqpager/Scripts/jqPaginator-1.2.0/dist/jqPager.ext.css" rel="stylesheet" />
</head>
<body>
    <div id="container"></div>
    <ul id="pagination1" class="pagination"></ul>

    <script src="/jqpager/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/jqpager/Scripts/json2.min.js"></script>
    <!--分页插件-->
    <script src="/jqpager/Scripts/jqPaginator-1.2.0/dist/jqPaginator.Zh-CN.min.js"></script>
    <script src="/jqpager/Scripts/jqPaginator-1.2.0/dist/jqPager.ext.min.js"></script>
   
    <script type="text/javascript">
        $(function () {
            var type = page = getQueryString("type") || "1";
            switch (type) {
                case "1":
                    InitPage({ ajax: "true", callfun: "callFun(num)" });
                    break;
                case "2":
                    InitPage({ ajax: "true", scollload: "true", callfun: "callFun2(num)" });
                    break;
                case "3":
                    loadPage();
                    break;

            }
        })      
    </script>

    <!--demo1 ajax分页带页码-->
    <script type="text/javascript">
        $(function () {
            //InitPage({ ajax: "true", callfun: "callFun(num)" });
        })
        //ajax分页回调函数
        //num表示当前的页数
        function callFun(num) {
            //重新设置总条数
            if (num == 1) {
                var totalcount = getTotalCount();
                $('.pagination').jqPaginator('option', {
                    totalCounts: totalcount
                });
            }
            //进行ajax数据拉取，num表示当前的页数
            //清空页面的数据
            $("#container").html("");
            //以下是前端版本的jsdemo
            myJsRanderData(num);
        }
    </script>
    <!--demo2 ajax下拉加载 不带页码-->
    <script type="text/javascript">
        $(function () {
            //InitPage({ ajax: "true",scollload:"true", callfun: "callFun2(num)" });
        })
        //ajax分页回调函数
        //num表示当前的页数
        function callFun2(num) {
            if (num == 1) {
                //清空页面的数据
                $("#container").html("");
                //重新设置总条数
                var totalcount = getTotalCount();
                $('.pagination').jqPaginator('option', {
                    totalCounts: totalcount
                });
            }
            //进行ajax数据拉取，num表示当前的页数
            //以下是前端版本的jsdemo
            myJsRanderData(num);
        }
    </script>
    <!--demo3 传统跳转分页-->
    <script type="text/javascript">
        $(function () {
            //loadPage();
        })
        function loadPage() {
            //配置参数
            var page = getQueryString("page") || 1;
            page = parseInt(page);
            var totalcount = getTotalCount();
            //调用插件，设置分页效果
            InitPage({ count: totalcount, page: page });
            //模拟数据
            myJsRanderData(page);
        }
    </script>
    <!--临时数据绑定demo-- start----------------------------------->
    <!--模板解析 jquery-tmpl -->
    <script src="/jqpager/Scripts/jquery-tmpl/jquery.tmpl.min.js"></script>
    <script id="movieTemplate" type="text/x-jquery-tmpl">
        <li>
            <b>${Name}</b> (${ReleaseYear})
        </li>
    </script>
    <script type="text/javascript">
        //后台数据列表
        var movies = [
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Inheritance", ReleaseYear: "1976" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Inheritance", ReleaseYear: "1976" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Inheritance", ReleaseYear: "1976" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Inheritance", ReleaseYear: "1976" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "The Inheritance", ReleaseYear: "1976" },
               { Name: "The Red Violin", ReleaseYear: "1998" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
               { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        ];
        function getTotalCount() {
            return movies.length;
        }
        function myJsRanderData(num) {
            var pagedata = arrayPagination(num, 10, movies);
            $("#movieTemplate").tmpl(pagedata).appendTo("#container");
        }
        function arrayPagination(pageNo, pageSize, array) {
            var offset = (pageNo - 1) * pageSize;
            return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
        }
    </script>
    <!--/模板解析-->
    <!--临时数据绑定demo-- end----------------------------------->
</body>
</html>